<template>
	<view class="content">

<view style="padding: 0 20rpx;">
	<view v-for="(dateObj,index) in dateList" :key="index" class="dateItem"
		:style="index == dateIndex ? 'background-color:#A41853;color:#FFF':''" @click="dateClick(dateObj,index)">
		{{dateObj.value}}
	</view>
</view>



		<view class="treeShowData">

			<view class="AM" v-if="treeShowData.AM && treeShowData.AM.length > 0">
				<view class="am_title">
					AM
				</view>
				<Program :List="treeShowData.AM"></Program>
			</view>


			<view class="PM" v-if="treeShowData.PM && treeShowData.PM.length > 0">
				<view class="pm_title">
					PM
				</view>


				<Program :List="treeShowData.PM"></Program>
			</view>

		</view>



	</view>
</template>

<script>
	import {
		convertDateFormat
	} from '../../utils/dateUtil.js'

	import {
		request
	} from '../../utils/request.js'

	import Program from './Program.vue'
	export default {
		components: {
			Program
		},
		data() {
			return {
				dateList: [],
				dateIndex: 0,
				tree: Object.freeze({}),
				treeShowData: Object.freeze({}),
			}
		},




		onLoad() {
			this.getProgramList();

		},
		onPullDownRefresh() {
			this.getProgramList();
			setTimeout(()=>{
				uni.stopPullDownRefresh();
			},1000)
		},

		methods: {
			dateClick(item, index) {
				this.dateIndex = index;
				let key = this.dateList[index].key;
				this.treeShowData = this.tree[key]
			},

			getProgramList() {
				// request("https://author2025b.piers.org/jsapi/session/programfinal").then(data => {
				
				request("https://zhuxing.oss-cn-hangzhou.aliyuncs.com/geo/Program.json").then(data => {
					
		
					const tree = data.data.tree;
					this.tree = tree;
					const keys = Object.keys(tree);
					this.dateList = convertDateFormat(
						keys); // ["2025-11-05","2025-11-06","2025-11-07","2025-11-08","2025-11-09"]
					let key = this.dateList[0].key;
					this.treeShowData = this.tree[key]
				})

			}
		},
	}
</script>

<style lang="less">
	.content {
		padding: 20rpx 0;

	}

	.dateItem {
		color: #a31953;
		padding: 10rpx 10rpx;
		border-radius: 5rpx;
	}

	.am_title,
	.pm_title {
		font-size: 48rpx;
		position: relative;
		padding: 0 20rpx;

		&::after {
			position: absolute;
			content: "";
			right: 0;
			left: 100rpx;
			height: 1rpx;
			top: 50%;
			background-color: #333333;
			transform: translateY(-50%);
		}
	}
</style>